<ng-template let-context let-modal="modal" #labelsEditModal>
    <div class="header">{{ 'common_labels' | translate }}</div>
    <div class="content labels-edit">
        <div class="ui form">
          <div class="ui info message" *ngIf="!labels || labels.length === 0">{{ 'project_label_no' | translate }}</div>
          <div class="inline fields" *ngFor="let label of labels">
            <label>{{'common_name' | translate}}</label>
            <div class="field">
              <input type="text" [placeholder]="'common_name' | translate" [(ngModel)]="label.name">
            </div>
            <label>{{'common_color' | translate}}</label>
            <div class="field">
              <input type="text" [placeholder]="'common_color' | translate" [(ngModel)]="label.color">
            </div>
            <div class="field">
              <i class="circle icon" [style.color]="label.color"></i>
            </div>
            <div class="field">
              <app-delete-button (event)="deleteLabel(label)"></app-delete-button>
            </div>
          </div>
          <div class="inline fields" [class.mt5]="!labels || labels.length === 0">
            <label>{{'common_name' | translate}}</label>
            <div class="field">
              <input type="text" [placeholder]="'common_name' | translate" [(ngModel)]="newLabel.name">
            </div>
            <label>{{'common_color' | translate}}</label>
            <div class="field">
              <input type="text" placeholder="#FF0000" [(ngModel)]="newLabel.color">
            </div>
            <div class="field">
              <i class="circle icon" [style.color]="newLabel.color"></i>
            </div>
            <div class="field">
              <button class="ui green button" [disabled]="loading" [class.loading]="loading" (click)="createLabel()"><i class="plus icon"></i>{{ 'btn_add' | translate}}</button>
            </div>
          </div>
        </div>
    </div>
    <div class="actions">
        <button class="ui grey button" [disabled]="loading" [class.loading]="loading" (click)="modal.approve(true)">{{ 'common_close' | translate }}</button>
        <button class="ui green button" *ngIf="project.permission === permission.READ_WRITE_EXECUTE" [disabled]="loading" [class.loading]="loading" (click)="saveLabels(true)">
            {{ 'btn_save' | translate }}
        </button>
    </div>
</ng-template>
